<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		#wrapper{
			margin: 50px 100px;
			width: 900px;
			
		}
		#small{
			width: 400px;
			height: 250px;
			background: url(img/small1.jpg) repeat;
			position: relative;
		}
		#big{
			width: 400px;
			height:250px;
			overflow: hidden;
			position: relative;
		}
		#right{
			float: left;
			display: none;
		}
		#left{
			float: left;
		}
		
		#big img{
			width: 800px;
			height: 500px;
		}
		#big li{
			position: absolute;
			top: 0;
			left: 0;
			display: none;
		}
		#glass{
			width: 200px;
			height: 125px;
			box-shadow: 0 0 0 2px rgba(255,255,255,0.8),0 0 2px 2px rgba(0,0,0,0.3),inset 0 0 40px 2px rgba(0,0,0,0.3); 
			position: absolute;
			top: 0;
			left: 0;
			display: none;
			cursor: crosshair;
		}
		#img-ul li{
			margin: 5px 2px;
			float: left;
			cursor: pointer;
			border: 4px solid #fff;
		}
		#img-ul img{
			display: block;
			width: 90px;
			height: 52px;
		}
		#img-ul .on{
			border-color: darkorange;
		}
		#big .active{
			display: block;
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<div id="left">
			<div id="small">	
				<div id="glass"></div>
			</div>
			<ul id="img-ul">
				<li class="on"><img src="img/images/0.jpg" alt="" /></li>
				<li><img src="img/images/1.jpg" alt="" /></li>
				<li><img src="img/images/2.jpg" alt="" /></li>
				<li><img src="img/images/3.jpg" alt="" /></li>
			</ul>
		</div>
		<div id="right">
			<ul id="big">
				<li class="active"><img src="img/images/0.jpg"/></li>
				<li><img src="img/images/1.jpg"/></li>
				<li><img src="img/images/2.jpg"/></li>
				<li><img src="img/images/3.jpg"/></li>
			</ul>
		</div>
	</div>
</body>
<script type="text/javascript">
	//获取元素
	//小图
	var small = document.getElementById("small");
	//放大镜
	var glass = document.getElementById("glass");
	//大图
	var big = document.querySelector("#big img")	
	//列表图片
	var imgLi = document.querySelectorAll("#img-ul li")
	//大图图片
	var bigLi = document.querySelectorAll("#big li")
	//右边所有的
	var right = document.getElementById("right")
	//循环获得每一个li，并绑定上事件
	for (var i = 0; i<imgLi.length; i++) {
		imgLi[i].onmouseover = function(){
			for (var j = 0; j<imgLi.length;j++) {
				imgLi[j].className = ''
				bigLi[j].className = ''
			}
			for (var i = 0; i<imgLi.length; i++) {
				if(imgLi[i]==this){
					var a = i
				}
			}
			imgLi[a].className = 'on'
			bigLi[a].className = 'active'
			small.style.backgroundImage = "url(img/images/"+a+".jpg)"
		}
	}
	//鼠标移动事件， 让放大镜跟着鼠标跑
	small.onmousemove = function(event){
		glass.style.display = "block";
		right.style.display = "block"
		//event的兼容写法
		event = event||window.event;
		//让放大镜的左边和顶边与鼠标位子关联起来    鼠标要在放大镜里面居中，左右各加上放大镜的一半
		glass.style.left = event.clientX-small.offsetLeft-glass.offsetWidth/2+"px";
		glass.style.top = event.clientY-small.offsetTop-glass.offsetHeight/2+"px";
		//判断放大镜的临界值
		if(glass.offsetLeft <= 0){
			glass.style.left = 0;
		}
		if(glass.offsetLeft >= small.offsetWidth-glass.offsetWidth){
			glass.style.left = (small.offsetWidth-glass.offsetWidth)+"px";
		}
		if(glass.offsetTop <= 0){
			glass.style.top = 0;
		}
		if(glass.offsetTop >= small.offsetHeight-glass.offsetHeight){
			glass.style.top = (small.offsetHeight-glass.offsetHeight)+"px"
		}
		//判断放大镜移动时 大图的位子
		for (var i = 0; i<bigLi.length; i++) {
			bigLi[i].style.left = -glass.offsetLeft*2+"px"
			bigLi[i].style.top = -glass.offsetTop*2+"px"
		}
		
	}
	//鼠标移出事件，移出时， 让放大镜隐藏
	small.onmouseleave = function(){
		glass.style.display = "none"
		right.style.display = "none"
	}
</script>
</html>